<template>
  <div class="box">
    <el-tabs
      v-model="activeName"
      type="card"
      @tab-click="handleClick"
      style="margin-left: 20px;margin-top:16px;"
    >
      <el-tab-pane
        label="申请记录"
        name="apply"
        class="allContent"
      ></el-tab-pane>
      <el-tab-pane
        label="使用中"
        name="useing"
        class="allContent"
      ></el-tab-pane>
      <el-tab-pane label="已结束" name="useed" class="allContent"></el-tab-pane>
    </el-tabs>

    <div class="content">
      <div class="searchCon" :model="applicationRecordList">
        <el-input
          placeholder="请输入优惠券名称"
          class="typeInput"
          v-model="listQuery.couponName"
          clearable
        ></el-input>
        <el-select
          placeholder="请选择优惠券类型"
          class="typeSelect"
          v-model="listQuery.couponType"
          clearable
        >
          <el-option label="直抵券" value="0"></el-option>
          <el-option label="兑换券" value="1"></el-option>
          <el-option label="满减券" value="2"></el-option>
          <el-option label="折扣券" value="3"></el-option>
        </el-select>

        <button class="searchBth" @click="applySearch">查询</button>
      </div>

      <el-table
        v-if="listQuery.recordPage == '1' || listQuery.recordPage == '2'"
        :data="applicationRecordList"
        style="width: 100%"
        :header-cell-style="tableHeadClass"
      >
        <el-table-column prop="couponId" label="优惠券id" width="180">
        </el-table-column>
        <el-table-column label="优惠券名称">
          <template slot-scope="scope">
            <span
              style="color: #3B86FF;cursor:pointer"
              @click="lookApply(scope.row.couponId, scope.row.recordId)"
              >{{ scope.row.coupon.couponName }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="优惠券类型">
          <template slot-scope="scope">
            <span>{{ scope.row.coupon.couponType }}</span>
          </template>
        </el-table-column>
        <el-table-column label="优惠券力度">
          <template slot-scope="scope">
            <span v-if="scope.row.coupon.couponType == '直抵券'">{{
              scope.row.coupon.couponValues &&
              scope.row.coupon.couponValues.length > 0
                ? scope.row.coupon.couponValues["0"]
                : 0
            }}</span>
            <span v-if="scope.row.coupon.couponType == '折扣券'"
              >{{
                scope.row.coupon.couponValues &&
                scope.row.coupon.couponValues.length > 0
                  ? scope.row.coupon.couponValues["0"]
                  : 0
              }}折</span
            >
            <span v-if="scope.row.coupon.couponType == '满减券'"
              >满{{
                scope.row.coupon.couponValues &&
                scope.row.coupon.couponValues.length > 0
                  ? scope.row.coupon.couponValues["0"]
                  : 0
              }}
              <span>减{{
                  scope.row.coupon.couponValues &&
                  scope.row.coupon.couponValues.length > 0
                    ? scope.row.coupon.couponValues["1"]
                    : 0
                }}</span>
            </span>
            <span v-if="scope.row.coupon.couponType == '兑换券'">{{
              scope.row.coupon.couponValues &&
              scope.row.coupon.couponValues.length > 0
                ? scope.row.coupon.couponValues["0"]
                : 0
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="applyNum" label="申请数量"> </el-table-column>
        <el-table-column label="已使用数量">
          <template slot-scope="scope">
            <span >{{scope.row.receiveNum == null ? 0 :scope.row.receiveNum}}</span>
          </template>
        </el-table-column>
        <el-table-column label="可用数量">
          <template slot-scope="scope">
            <span>{{ scope.row.applyNum - scope.row.receiveNum}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140">
          <template slot-scope="scope">
            <span
            style="color:#008DF8;cursor:pointer"
              v-if="scope.row.couponApply == '审核中'"
              @click="revokeApply(scope.row.recordId)"
            >
              撤销申请
            </span>
            <span @click="lookApply(scope.row.couponId, scope.row.recordId)" style="cursor:pointer;color:#008DF8;">
              查看记录
            </span>
          </template>
        </el-table-column>
      </el-table>
      
      <el-table
        :data="applicationRecordList"
        style="width: 100%"
        :header-cell-style="tableHeadClass"
        :key="0"
        v-else
      >
        <el-table-column prop="couponId" label="优惠券id" width="180">
        </el-table-column>
        <el-table-column label="优惠券名称" width="210">
          <template slot-scope="scope">
            <span
              style="color: #3B86FF;cursor:pointer"
              @click="lookApply(scope.row.couponId, scope.row.recordId)"
              >{{ scope.row.coupon.couponName }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="优惠券类型" width="100">
          <template slot-scope="scope">
            <span >{{ scope.row.coupon.couponType }}</span>
          </template>
        </el-table-column>
        <el-table-column label="优惠券力度" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.coupon.couponType == '直抵券'">{{
              scope.row.coupon.couponValues &&
              scope.row.coupon.couponValues.length > 0
                ? scope.row.coupon.couponValues["0"]
                : 0
            }}</span>
            <span v-if="scope.row.coupon.couponType == '折扣券'"
              >{{
                scope.row.coupon.couponValues &&
                scope.row.coupon.couponValues.length > 0
                  ? scope.row.coupon.couponValues["0"]
                  : 0
              }}折</span
            >
            <span v-if="scope.row.coupon.couponType == '满减券'"
              >满{{
                scope.row.coupon.couponValues &&
                scope.row.coupon.couponValues.length > 0
                  ? scope.row.coupon.couponValues["0"]
                  : 0
              }}
              <span
                >减{{
                  scope.row.coupon.couponValues &&
                  scope.row.coupon.couponValues.length > 0
                    ? scope.row.coupon.couponValues["1"]
                    : 0
                }}</span
              ></span
            >
            <span v-if="scope.row.coupon.couponType == '兑换券'">{{
              scope.row.coupon.couponValues &&
              scope.row.coupon.couponValues.length > 0
                ? scope.row.coupon.couponValues["0"]
                : 0
            }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="applyNum" label="申请数量" width="120"></el-table-column>
        <el-table-column label="备注" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="applyUserName" label="申请人" width="140"> </el-table-column>
        <el-table-column label="申请时间" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.applyDateTime | filterTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="couponApply" label="申请状态" width="120"></el-table-column>
        <el-table-column
          prop="rejectText"
          label="拒绝理由"
          width="140"
        ></el-table-column>

        <el-table-column label="操作" width="160" align="right">
          <template slot-scope="scope">
            <span
              style="color:#008DF8;cursor:pointer"
              v-if="scope.row.couponApply == '审核中'"
              @click="revokeApply(scope.row.recordId)"
              
            >
              撤销申请
            </span>
            <span style="color:#008DF8;cursor:pointer" @click="lookApply(scope.row.couponId, scope.row.recordId)">
              查看记录
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination
      v-if="total > 0"
      :total="total"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="applicationRecordInit"
    />
  </div>
</template>

<script>
import { getCouponRecords, getRevoke } from "../../service/api/index";
import Pagination from "@/components/Pagination";
import { mapGetters } from "vuex";
import { parseTime } from "@/utils/index";
export default {
  data() {
    return {
      activeName: "apply",
      // 申请记录
      applyData: [
        {
          id: "20160502545648",
          name: "xxx折扣券",
          type: "折扣券",
          intensity: "7折",
          number: "1000张",
          remarks: "备注信息备注信息备注信息...",
          applyUse: "张三",
          time: "2020-1-12 20:30",
          state: "审核中",
          refusal: "拒绝理由拒绝理由拒绝理由...",
          operation: "撤销申请"
        },
        {
          id: "684561321564313",
          name: "xxx折扣券",
          type: "折扣券",
          intensity: "7折",
          number: "1000张",
          remarks: "备注信息备注信息备注信息...",
          applyUse: "张三",
          time: "2020-1-12 20:30",
          state: "审核中",
          refusal: "拒绝理由拒绝理由拒绝理由...",
          operation: "撤销申请"
        },
        {
          id: "9846513215645",
          name: "xxx折扣券",
          type: "折扣券",
          intensity: "7折",
          number: "1000张",
          remarks: "备注信息备注信息备注信息...",
          applyUse: "张三",
          time: "2020-1-12 20:30",
          state: "审核中",
          refusal: "拒绝理由拒绝理由拒绝理由...",
          operation: "撤销申请"
        },
        {
          id: "54145464692318",
          name: "xxx折扣券",
          type: "折扣券",
          intensity: "7折",
          number: "1000张",
          remarks: "备注信息备注信息备注信息...",
          applyUse: "张三",
          time: "2020-1-12 20:30",
          state: "审核中",
          refusal: "拒绝理由拒绝理由拒绝理由...",
          operation: "撤销申请"
        }
      ],
      // 使用中
      useingdata: [
        {
          id: "1235858879662",
          name: "xxx折扣券",
          type: "折扣券",
          intensity: "7折",
          number: "1000张",
          remarks: "备注信息备注信息备注信息...",
          applyUse: "李四",
          time: "2020-1-12 20:30",
          state: "审核中",
          refusal: "拒绝理由拒绝理由拒绝理由...",
          operation: "撤销申请"
        },
        {
          id: "465465481321654",
          name: "xxx折扣券",
          type: "折扣券",
          intensity: "7折",
          number: "1000张",
          remarks: "备注信息备注信息备注信息...",
          applyUse: "李四",
          time: "2020-1-12 20:30",
          state: "审核中",
          refusal: "拒绝理由拒绝理由拒绝理由...",
          operation: "撤销申请"
        },
        {
          id: "8465465413123465",
          name: "xxx折扣券",
          type: "折扣券",
          intensity: "7折",
          number: "1000张",
          remarks: "备注信息备注信息备注信息...",
          applyUse: "李四",
          time: "2020-1-12 20:30",
          state: "审核中",
          refusal: "拒绝理由拒绝理由拒绝理由...",
          operation: "撤销申请"
        },
        {
          id: "9865465574512315",
          name: "xxx折扣券",
          type: "折扣券",
          intensity: "7折",
          number: "1000张",
          remarks: "备注信息备注信息备注信息...",
          applyUse: "李四",
          time: "2020-1-12 20:30",
          state: "审核中",
          refusal: "拒绝理由拒绝理由拒绝理由...",
          operation: "撤销申请"
        }
      ],
      // 已结束
      useeddata: [
        {
          id: "546845531848661",
          name: "xxx折扣券",
          type: "折扣券",
          intensity: "7折",
          number: "1000张",
          remarks: "备注信息备注信息备注信息...",
          applyUse: "王五",
          time: "2020-1-12 20:30",
          state: "审核中",
          refusal: "拒绝理由拒绝理由拒绝理由...",
          operation: "撤销申请"
        },
        {
          id: "1235858879662",
          name: "xxx折扣券",
          type: "折扣券",
          intensity: "7折",
          number: "1000张",
          remarks: "备注信息备注信息备注信息...",
          applyUse: "王五",
          time: "2020-1-12 20:30",
          state: "审核中",
          refusal: "拒绝理由拒绝理由拒绝理由...",
          operation: "撤销申请"
        },
        {
          id: "1235858879662",
          name: "xxx折扣券",
          type: "折扣券",
          intensity: "7折",
          number: "1000张",
          remarks: "备注信息备注信息备注信息...",
          applyUse: "王五",
          time: "2020-1-12 20:30",
          state: "审核中",
          refusal: "拒绝理由拒绝理由拒绝理由...",
          operation: "撤销申请"
        },
        {
          id: "1235858879662",
          name: "xxx折扣券",
          type: "折扣券",
          intensity: "7折",
          number: "1000张",
          remarks: "备注信息备注信息备注信息...",
          applyUse: "王五",
          time: "2020-1-12 20:30",
          state: "审核中",
          refusal: "拒绝理由拒绝理由拒绝理由...",
          operation: "撤销申请"
        }
      ],
      listQuery: {
        couponName: "",
        couponType: "",
        couponApply: "",
        recordPage: 0,
        pageNum: 1,
        pageSize: 10
      },

      total: 0,
      applicationRecordList: [],
      revokeShow: false
    };
  },
  created() {
    this.applicationRecordInit();
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  components: {
    Pagination
  },
  filters: {
    filterTime(val) {
      return parseTime(val, "{y}-{m}-{d}");
    }
  },
  methods: {
    tableHeadClass() {
      return "background:#F5F6FA; height:40px;fontSize:13px;color:#A3A6B4";
    },
    async applicationRecordInit() {
      const res = await getCouponRecords({
        ...this.listQuery
      });
      this.applicationRecordList = res.data.content;
      this.total = res.data.totalElements;
    },
    applySearch() {
      this.listQuery.pageNum = 1;
      this.applicationRecordList = [];
      this.applicationRecordInit();
    },
    handleClick(e) {
      let recordPage = e.label;
      console.log(e);
      if (e.label == "申请记录") {
        recordPage = "0";
      } else if (e.label == "使用中") {
        recordPage = "1";
      } else if (e.label == "已结束") {
        recordPage = "2";
      }
      this.listQuery.recordPage = recordPage;
      this.applySearch();
    },
    lookApply(id, recordId) {
      this.$router.push({
        path: "./couponDetailsPass",
        query: { couponId: id, recordId: recordId }
      });
    },
    revokeApply(recordId) {
      this.$confirm("此操作将撤销申请, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const res = await getRevoke({
            recordId: recordId || ""
          });
          if (res.code == "0" && res.data) {
            this.applicationRecordInit();
            this.$message({
              type: "success",
              message: "撤销申请成功!"
            });
          } else {
            this.$message({
              type: "success",
              message: res.errMsg
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消撤销"
          });
        });
    }
  }
}
</script>

<style lang="scss" scoped>

.content {
  margin: 0 20px;
}
.searchBth {
  width: 69px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  color: #fff;
  background-color: #43425d;
  border: 0;
  border-radius: 4px;
}
/deep/.typeSelect {
  width: 174px;
  height: 32px;
  margin-right: 20px;
}
/deep/.typeInput {
  width: 174px;
  height: 32px;
}
.searchCon {
  display: flex;
  margin-bottom: 20px;
}
/deep/.el-input__icon {
  height: 110%;
}
/deep/.el-input {
  height: 32px;
  margin-right: 20px;
}
/deep/.el-input__inner {
  height: 32px;
}
/deep/.el-tabs__item {
  width: 137px;
  height: 32px;
  line-height: 32px;
  text-align: center;
}
/deep/.el-tabs--card > .el-tabs__header .el-tabs__item {
  border-bottom: 1px solid #e9e9f0;
}
/deep/.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border: 1px solid #409eff;
}
/deep/.el-tabs--card > .el-tabs__header .el-tabs__item:last-child.is-active {
  border: 1px solid #409eff;
  border-radius: 0 4px 4px 0;
}
/deep/.el-tabs--card > .el-tabs__header .el-tabs__item:first-child.is-active {
  border: 1px solid #409eff;
  border-radius: 4px 0 0 4px;
}
/deep/.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border-radius: 4px;
}
/deep/.el-tabs--card > .el-tabs__header {
  border: 0;
}
.atg-header {
  line-height: 60px;
  border-bottom: 1px solid #e9e9f0;
}
.atg-header .title {
  font-weight: 600;
}
</style>
